<template>
  <div class="shop-appraise-main-tags">
    <div
      v-for="(item, index) in tags"
      :key="index"
      class="tag"
      :class="{ 'not-good': item.unsatisfied, active: currentIndex === index }"
      @click="handleAppraiseTagBtn(index,item.name)"
    >
      {{ item.name }}({{ item.count }})
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
    };
  },
  props: {
    tags: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    handleAppraiseTagBtn(index,name) {
      this.currentIndex = index;
      this.$bus.$emit('handleAppraiseTagBtn',name)
    },
  },
};
</script>
<style lang="less" scoped>
.shop-appraise-main-tags {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  .tag {
    padding: 8px 10px;
    margin: 0 5px 5px 0;
    border-radius: 5px;
    background-color: #ebf5ff;
    font-size: 15px;
    color: #6d7885;
  }
  .not-good {
    color: #bbbbbb;
  }
  .active {
    background-color: #3190e8;
    color: #ffffff;
  }
}
</style>